import React, {Component} from 'react';
import Ajax from 'lib/Ajax';
import { inject, observer } from 'mobx-react';
import { Toast, List, Button, InputItem } from 'antd-mobile'
import { Link } from 'react-router'
import Top from 'components/top'
import { createForm } from 'rc-form';

const pageName = 'chat';

@inject('appStore', 'languageStore')
@observer
class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      pageCount: 2,
      isLoading: false
    }
    this.currentPage = 1;
    this.searchOption = {};
  }

  componentDidMount(){
    this.fetchList(1);
  }

  fetchList = (currentPage) => {
    const self = this;
    const { pageCount, isLoading } = self.state;
    if(isLoading || currentPage > pageCount){
      return
    }
    self.setState({
      isLoading: true
    });
    Ajax({
      url: '/chat/getchatrecordlist',
      data: {
        currentPage,
        pageSize: 10,
        chatLineId: this.props.params.id
      },
      success: function(result){
        result.list.forEach(item=>{
          self.state.dataSource.push(item)
        });
        self.setState({
          dataSource: self.state.dataSource,
          pageCount: result.pageCount,
          isLoading: false
        });
      },
      error: function(error){
        Toast.info(error||'请求失败');
        self.setState({
          isLoading: false
        });
      }
    });
  }

  submit = ()=>{
    const self = this;
    Ajax({
      url: '/chat/addrecord',
      data: {
        userId: this.props.appStore.userData.userId,
        chatLineId: this.props.params.id,
        content: self.props.form.getFieldValue('content')
      },
      success: function(result){
        self.state.dataSource.push(result)
        self.setState({
          dataSource: self.state.dataSource,
        });
        self.props.form.resetFields();
      },
      error: function(error){
        Toast.info(error||'请求失败');
        self.setState({
          isLoading: false
        });
      }
    });
  }

  render() {
    const {getFieldProps} = this.props.form;
    const { imgBaseUrl, userData } = this.props.appStore;
    const pageData = this.props.languageStore.getPageData(pageName);
    return (
    	<div className={pageName}>
        <div className="chat-bg"></div>
        <div className="chat-z">
          <Top
            title={pageData.title}
          />
          <div className={`${pageName}-con`}>
            {
              this.state.dataSource.map((message,index)=>{
                  if(message.teacherId){
                      return (<div className="p" key={index}>
                                  <img src={`${imgBaseUrl}${message.userImg}`} className="icon" />
                                  <div className="r">
                                      <div className="name">{ message.teacherId }</div>
                                      <div className="msg">
                                          <span className="arrow"></span>
                                          <p>{ message.content }</p>
                                          <p className="c-9">{message.createTime}</p>
                                      </div>
                                  </div>
                              </div>)
                  }else{
                      return (<div className="p self" key={index}>
                                  <div className="r">
                                      <div className="name">{ userData.account }</div>
                                      <div className="msg">
                                          <span className="arrow"></span>
                                          <p>{ message.content }</p>
                                          <p className="c-9">{message.createTime}</p>
                                      </div>
                                  </div>
                                  <img src={`${imgBaseUrl}${userData.img||userData.coverImg}`} className="icon" />
                              </div>)
                  }
              })
            }
          </div>
          <div className="fix-input">
            <List>
              <InputItem
                {...getFieldProps('content')}
                placeholder="输入你想说的话"
                extra={<Button type='primary' onClick={this.submit}>发送</Button>}
              ></InputItem>
            </List>
          </div>
        </div>
    	</div>
    )
  }
}

module.exports = createForm()(ModuleName)
